import React, { forwardRef } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

// DropdownMenu组件
const DropdownMenu = DropdownMenuPrimitive.Root;

// DropdownMenuTrigger组件
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

// DropdownMenuContent组件
const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuContentProps>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={`z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
    {...props}
  />
));

// DropdownMenuItem组件
const DropdownMenuItem = forwardRef<HTMLElement, DropdownMenuPrimitive.DropdownMenuItemProps>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
    {...props}
  />
));

// DropdownMenuSeparator组件
const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuSeparatorProps>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={`-mx-1 my-1 h-px bg-muted ${className}`}
    {...props}
  />
));

// DropdownMenuGroup组件
const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuGroupProps>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Group
    ref={ref}
    className={`${className}`}
    {...props}
  />
));

// DropdownMenuLabel组件
const DropdownMenuLabel = forwardRef<HTMLLabelElement, DropdownMenuPrimitive.DropdownMenuLabelProps>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={`px-2 py-1.5 text-sm font-semibold ${className}`}
    {...props}
  />
));

// DropdownMenuCheckboxItem组件
const DropdownMenuCheckboxItem = forwardRef<HTMLElement, DropdownMenuPrimitive.DropdownMenuCheckboxItemProps>(({ className, checked, children, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    checked={checked}
    className={`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
    {...props}
  >
    <div className="mr-2 h-4 w-4 flex-shrink-0 rounded border border-primary text-primary">
      <DropdownMenuPrimitive.ItemIndicator>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M11.6666 3.33325L5.66656 9.33325L2.33325 6.00004" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </DropdownMenuPrimitive.ItemIndicator>
    </div>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
));

// DropdownMenuRadioGroup组件
const DropdownMenuRadioGroup = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuRadioGroupProps>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioGroup
    ref={ref}
    className={`${className}`}
    {...props}
  />
));

// DropdownMenuRadioItem组件
const DropdownMenuRadioItem = forwardRef<HTMLElement, DropdownMenuPrimitive.DropdownMenuRadioItemProps>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={`relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
    {...props}
  >
    <div className="mr-2 h-4 w-4 flex-shrink-0 rounded-full border border-primary text-primary">
      <DropdownMenuPrimitive.ItemIndicator>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <circle cx="7" cy="7" r="3" fill="currentColor" />
        </svg>
      </DropdownMenuPrimitive.ItemIndicator>
    </div>
    {children}
  </DropdownMenuPrimitive.RadioItem>
));

// 导出所有组件
export {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
};